<template>
    <div>
        {{username}} <button @click="changeUsername">修改</button>
        <br>
        {{people.name}}
        <button @click="ePeople">修改people</button>
        <div>
            money:{{refMoney}} , {{reMoney}} <button @click="changeMoney">changeMoney</button>
            <button @click="changeReactiveMoney">changeReactiveMoney</button>
        </div>
        <div>
            ref代理对象:
            {{bookNum}} <button @click="changeBookNum">changeBookNum</button>
        </div>
        <div>
            reactive包含Ref:
            {{reactiveCar[0].value}}
        </div>
    </div>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
    setup () {
        let people=reactive({name:"老徐"});
        const username=ref("蔡徐坤");
        const randNum=()=>{
            return Math.floor(Math.random()*19)
        }
        let changeUsername=()=>{
            username.value="蔡徐坤"+randNum();
        }
        let ePeople=()=>{
            people.name="老王"
        }
        //把ref 赋值给reactive 依然保持响应式
        let refMoney=ref(1000);
        let reMoney=reactive({refMoney});
        const changeMoney=()=>{
            refMoney.value=999;
        }
        const changeReactiveMoney=()=>{
            reMoney.refMoney=888;
        }
        //ref 对象
        let bookNum=ref([10,20,30]);
        console.log(bookNum);
        const changeBookNum=()=>{
            // bookNum.value.push(99)
            bookNum.value[2]=randNum();
        }
        //Reactive 解包.
        let refCar=ref("宝马");
        let reactiveCar=reactive([refCar]); //需要手动解包
        console.log("reactiveCar",reactiveCar[0].value);
        // let reactiveCar=reactive({refCar}); //自动解包..
        // console.log("reactiveCar===>",reactiveCar.refCar.value);
        return {
            username,
            people,
            changeUsername,
            ePeople,
            refMoney,
            reMoney,
            changeMoney,
            changeReactiveMoney,
            bookNum,
            changeBookNum,
            reactiveCar
        }
    }
}
</script>

<style lang="scss" scoped>

</style>